<!-- 网站设置 -->
<template>
    <div class='bgff h100 pd pt10 dfgfdgtrt'>
        <p class="title-label">网站设置</p>

        <div class="mt20 sdfgdgdfyt">
            <n-form ref="formRef" label-width="120" :inline="false" size="normal" label-placement="left">
                <n-form-item label="网页标题:" path="" class="mt20">
                    <n-input v-model:value="formValue.title" type="text" placeholder="请输入网页标题" size="medium" clearable></n-input>
                </n-form-item>
                <n-form-item label="LOGO:" path="" class="mt20">
                    <div class="logo-context vertical-center " @click="photoShowModal = true">
                        <img :src="formValue.logo" class="w100 h100 imgjz" v-if="formValue.logo" />
                        <span v-else>点击上传LOGO</span> 
                    </div>
                </n-form-item>
                <n-form-item label="公众号:" path="" class="mt20">
                    <div class="display-flex">
                        <div class="logo-context vertical-center ab" @click="photoShowModalwchar = true">
                            <img :src="formValue.zzhimg" class="w100 h100 imgjz" v-if="formValue.zzhimg" />
                            <span v-else>点击上传公众号</span> 
                        </div>
                        <div class="vertical-center ml10">
                            <n-input v-model:value="formValue.zzhbz" type="text" placeholder="备注" size="medium"
                                clearable @change=""></n-input>
                        </div>
                    </div>
                </n-form-item>
                <n-form-item label="站酷跳转地址:" path="" class="mt20">
                    <n-input v-model:value="formValue.zkurl" type="text" placeholder="请输入站酷跳转地址" size="medium" clearable></n-input>
                </n-form-item>
                <n-form-item label="微博跳转地址:" path="" class="mt20">
                    <n-input v-model:value="formValue.wburl" type="text" placeholder="请输入微博跳转地址" size="medium" clearable></n-input>
                </n-form-item>
                <n-form-item label="新片场跳转地址:" path="" class="mt20">
                    <n-input v-model:value="formValue.xpcurl" type="text" placeholder="请输入新片场跳转地址" size="medium" clearable></n-input>
                </n-form-item>
                <div class="mt20">
                    <span class="red">seo相关请注意填写</span>
                </div>
                <n-form-item label="keywords:" path="" class="mt20">
                    <n-input v-model:value="formValue.keywords" type="text" placeholder="请输入keywords" size="medium" clearable></n-input>
                </n-form-item>
                <n-form-item label="description:" path="" class="mt20">
                    <n-input v-model:value="formValue.description" type="text" placeholder="请输入description" size="medium" clearable></n-input>
                </n-form-item>
                
                <n-form-item label="域名备案号:" path="" class="mt20">
                    <n-input v-model:value="formValue.bah" type="text" placeholder="请输入域名备案号" size="medium" clearable></n-input>
                </n-form-item>

                <n-form-item label="网页底部背景图:" path="" class="mt20">
                    <div class="logo-context vertical-center ac" @click="photoShowModalfooter = true">
                        <img :src="formValue.footerBg" class="w100 h100 imgjz" v-if="formValue.footerBg" />
                        <span v-else>点击上传网页底部背景图</span> 
                    </div>
                </n-form-item>


            </n-form>

        </div>

        <div class="mt20">
            <n-button type="primary" size="medium" @click="saveFun">保存</n-button>
            
        </div>
        <n-modal v-model:show="photoShowModal" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>logo</div>
            </template>
            <div>
                <photoGallery @getImg="getImg" types="cyyxlogo"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModal = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalwchar" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>公众号</div>
            </template>
            <div>
                <photoGallery @getImg="getImger" types="cyyxgzh"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalwchar = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImger"> 确定 </n-button>
                </div>
            </template>
        </n-modal>


        <n-modal v-model:show="photoShowModalfooter" preset="card" class="Stock-diagnosis">
            <template #header>
                <div>网页底部背景图</div>
            </template>
            <div>
                <photoGallery @getImg="getImgsan" types="网页底部背景图"></photoGallery>
            </div>
            <template #action>
                <div class="tr">
                    <n-button @click="photoShowModalfooter = false"> 取消 </n-button>
                    <n-button class="ml10" type="info" @click="setImgsan"> 确定 </n-button>
                </div>
            </template>
        </n-modal>

    </div>
</template>
<script lang='ts' setup>
import { ref } from "vue"
import photoGallery from "../../../components/util/photoGallery";
import { callBack, dxpost, qurl, dxget } from "../../../util/index"
const photoShowModal = ref(false)
const photoShowModalwchar = ref(false)
const photoShowModalfooter= ref(false)
const id = 4
const formValue = ref({
    title:"",
    logo: "",
    zzhimg: "",
    zzhbz: "",
    zkurl:"",
    wburl: "",
    xpcurl:"",
    keywords:"",
    description:"",
    bah:"",
    footerBg:""
})

let jjnmnxe = "";
const getImg = (data) => {
    jjnmnxe = data;
};
const setImg = () => {
    formValue.value.logo = jjnmnxe;
    photoShowModal.value = false;
};

let jjnmnxeer = "";
const getImger = (data) => {
    jjnmnxeer = data;
};
const setImger = () => {
    formValue.value.zzhimg = jjnmnxeer;
    photoShowModalwchar.value = false;
};

let jjnmnxesan = "";
const getImgsan = (data) => {
    jjnmnxesan = data;
};
const setImgsan = () => {
    formValue.value.footerBg  = jjnmnxesan;
    photoShowModalfooter.value = false;
};

const initData = async()=>{
    const {data}:any =  await dxget('cyyx/cyyxconfig',{id})
    
     
    const dataw = JSON.parse(data.data)
    if(dataw.title){
        formValue.value.title = dataw.title
    }
    if(dataw.logo){
        formValue.value.logo = dataw.logo
    }
    if(dataw.zzhimg){
        formValue.value.zzhimg = dataw.zzhimg
    }
    if(dataw.zzhbz){
        formValue.value.zzhbz = dataw.zzhbz
    }
    if(dataw.zkurl){
        formValue.value.zkurl = dataw.zkurl
    }
    if(dataw.wburl){
        formValue.value.wburl = dataw.wburl
    }



    if(dataw.xpcurl){
        formValue.value.xpcurl = dataw.xpcurl
    }
    if(dataw.keywords){
        formValue.value.keywords = dataw.keywords
    }
    if(dataw.description){
        formValue.value.description = dataw.description
    }
    if(dataw.bah){
        formValue.value.bah = dataw.bah
    }
    if(dataw.footerBg){
        formValue.value.footerBg = dataw.footerBg
    }
    
    
}
initData()
const saveFun = async()=>{
  const {errno}:any =  await dxpost('cyyx/cyyxconfig',{id,data:JSON.stringify(formValue.value)},'put')
  if(errno==0){
    window.$message.success('保存成功！')
  }
}
</script>
<style scoped>
.dfgfdgtrt{
    overflow: auto;
    padding-bottom: 40px;
}
.sdfgdgdfyt {
    width: 1200px;
}

.logo-context {
    border: 1px dashed #999;
    width: 250px;
    height: 100px;
    text-align: center;
    color: #999;
    cursor: pointer;
    background: #e0e0e0;
}

.logo-context.ab {
    width: 94px;
    height: 94px;
}
.logo-context.ac{
    width: 600px;
    height: 300px;
}
</style>